<template>
  <div class="container">
    <div class="loading" v-if="loading"></div>
    <div v-show="!loading">
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-card shadow="always">
            <el-form :model="formList" ref="formList" size="normal">
              <div class="title">本年项目</div>
              <div class="titleCompare">项目名称:</div>
              <div class="divCompare">
                <div id="project_name1" style="display:inline">{{formList.project_name}}</div>
              </div>
              <div class="titleCompare">是否通过发改委立项:</div>
              <div class="divCompare">
                <div id="check_flag1" style="display:inline">{{formList.check_flag=='0'?'立项':'未立项'}}</div>
              </div>
              <div class="titleCompare">{{formList.check_flag=='1'?'立项批复文号':'财政局指标文或技术审核文号'}}</div>
              <div class="divCompare">
                <div id="document_code1" style="display:inline">{{formList.document_code}}</div>
              </div>
              <div class="titleCompare">项目建设模式:</div>
              <div class="divCompare">
                <div id="project_model1" style="display:inline">{{formList.project_model | f_buildType}}</div>
              </div>
              <div class="titleCompare">项目采购方式:</div>
              <div class="divCompare">
                <div id="procurement_method1" style="display:inline">{{formList.procurement_method | f_purchaseType}}
                </div>
              </div>
              <div class="titleCompare">公安局备案等级保护级别:</div>
              <div class="divCompare">
                <div id="project_grade1" style="display:inline">{{formList.project_grade | f_levelProtect}}</div>
              </div>
              <div class="titleCompare">项目建设部门:</div>
              <div class="divCompare">
                <div id="department1" style="display:inline">{{formList.department}}</div>
              </div>
              <div class="titleCompare">项目建设联系人:</div>
              <div class="divCompare">
                <div id="contacts1" style="display:inline">{{formList.contacts}}</div>
              </div>
              <div class="titleCompare">项目建设联系人电话:</div>
              <div class="divCompare">
                <div id="contact_mobile1" style="display:inline">{{formList.contact_mobile}}</div>
              </div>
              <div class="titleCompare">项目运维申请部门:</div>
              <div class="divCompare">
                <div id="maintenance_department1" style="display:inline">{{formList.maintenance_department}}</div>
              </div>
              <div class="titleCompare">项目运维申请部门联系人:</div>
              <div class="divCompare">
                <div id="maintenance_contacts1" style="display:inline">{{formList.maintenance_contacts}}</div>
              </div>
              <div class="titleCompare">项目总投资金额:</div>
              <div class="divCompare">
                <div id="amount1" style="display:inline">{{formList.amount}}</div>
              </div>
              <div class="titleCompare">建成时间:</div>
              <div class="divCompare">
                <div id="create_time1" style="display:inline">{{formList.create_time}}</div>
              </div>
              <div class="titleCompare">项目运维申报情况:</div>
              <div class="divCompare">
                <div id="maintenance_type1" style="display:inline">{{formList.maintenance_type | f_declareType }}</div>
              </div>
              <div class="titleCompare">以往项目运维资金来源:</div>
              <div class="divCompare">
                <div id="maintain_amount_source1" style="display:inline">
                  {{formList.maintain_amount_source | f_declarePastType}}</div>
              </div>
              <div v-show="formList.maintenance_type>1&&formList.maintain_amount_source>=10">
                <div class="titleCompare">具体资金来源:</div>
                <div class="divCompare">
                  <div id="maintain_amount_source_custom1" style="display:inline">
                    {{formList.maintain_amount_source_custom}}
                  </div>
                </div>
              </div>
              <div class="titleCompare">项目使用情况:</div>
              <div class="divCompare">
                <div id="context1" style="display:inline">{{formList.context}}</div>
              </div>
              <el-form-item prop="check_file">
                <up-load titleName="财政局指标文/大数据局(经信委)技术审核文件" :size="50" :require="true" :switch="false"
                  :color="formList.check_file!=formList2.check_file?'red':''" v-model="formList.check_file">
                </up-load>
              </el-form-item>
              <el-form-item prop="document_url">
                <up-load titleName="发改委批复文件" :size="50" :require="true" :switch="false"
                  :color="formList.document_url!=formList2.document_url?'red':''" v-model="formList.document_url">
                </up-load>
              </el-form-item>
              <el-form-item prop="records_file">
                <up-load titleName="等（分）保备案证书" :size="50" :switch="false"
                  :color="formList.records_file!=formList2.records_file?'red':''" v-model="formList.records_file">
                </up-load>
              </el-form-item>
              <el-form-item prop="evaluation_file">
                <up-load titleName="漏扫或等保测评报告" :size="50" :switch="false"
                  :color="formList.evaluation_file!=formList2.evaluation_file?'red':''"
                  v-model="formList.evaluation_file">
                </up-load>
              </el-form-item>
              <el-form-item prop="doc_url">
                <up-load titleName="源代码及其技术文档" :size="50" :switch="false"
                  :color="formList.doc_url!=formList2.doc_url?'red':''" v-model="formList.doc_url"
                  :accept="['pdf', 'rar', 'zip']">
                </up-load>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-card shadow="always">
            <el-form :model="formList2" ref="formList2" size="normal">
              <div class="title">往年项目,批次{{formList2.apply_batch}}</div>
              <div class="titleCompare">项目名称:</div>
              <div class="divCompare">
                <div id="project_name2" style="display:inline">{{formList2.project_name}}</div>
              </div>
              <div class="titleCompare">是否通过发改委立项:</div>
              <div class="divCompare">
                <div id="check_flag2" style="display:inline">{{formList2.check_flag=='0'?'立项':'未立项'}}</div>
              </div>
              <div class="titleCompare">{{formList2.check_flag=='1'?'立项批复文号':'财政局指标文或技术审核文号'}}</div>
              <div class="divCompare">
                <div id="document_code2" style="display:inline">{{formList2.document_code}}</div>
              </div>
              <div class="titleCompare">项目建设模式:</div>
              <div class="divCompare">
                <div id="project_model2" style="display:inline">{{formList2.project_model | f_buildType}}</div>
              </div>
              <div class="titleCompare">项目采购方式:</div>
              <div class="divCompare">
                <div id="procurement_method2" style="display:inline">{{formList2.procurement_method | f_purchaseType}}
                </div>
              </div>
              <div class="titleCompare">公安局备案等级保护级别:</div>
              <div class="divCompare">
                <div id="project_grade2" style="display:inline">{{formList2.project_grade | f_levelProtect}}</div>
              </div>
              <div class="titleCompare">项目建设部门:</div>
              <div class="divCompare">
                <div id="department2" style="display:inline">{{formList2.department}}</div>
              </div>
              <div class="titleCompare">项目建设联系人:</div>
              <div class="divCompare">
                <div id="contacts2" style="display:inline">{{formList2.contacts}}</div>
              </div>
              <div class="titleCompare">项目建设联系人电话:</div>
              <div class="divCompare">
                <div id="contact_mobile2" style="display:inline">{{formList2.contact_mobile}}</div>
              </div>
              <div class="titleCompare">项目运维申请部门:</div>
              <div class="divCompare">
                <div id="maintenance_department2" style="display:inline">{{formList2.maintenance_department}}</div>
              </div>
              <div class="titleCompare">项目运维申请部门联系人:</div>
              <div class="divCompare">
                <div id="maintenance_contacts2" style="display:inline">{{formList2.maintenance_contacts}}</div>
              </div>
              <div class="titleCompare">项目总投资金额:</div>
              <div class="divCompare">
                <div id="amount2" style="display:inline">{{formList2.amount}}</div>
              </div>
              <div class="titleCompare">建成时间:</div>
              <div class="divCompare">
                <div id="create_time2" style="display:inline">{{formList2.create_time}}</div>
              </div>
              <div class="titleCompare">项目运维申报情况:</div>
              <div class="divCompare">
                <div id="maintenance_type2" style="display:inline">{{formList2.maintenance_type | f_declareType }}</div>
              </div>
              <div class="titleCompare">以往项目运维资金来源:</div>
              <div class="divCompare">
                <div id="maintain_amount_source2" style="display:inline">
                  {{formList2.maintain_amount_source | f_declarePastType}}</div>
              </div>
              <div v-show="formList.maintenance_type>1&&formList.maintain_amount_source>=10">
                <div class="titleCompare">具体资金来源:</div>
                <div class="divCompare">
                  <div id="maintain_amount_source_custom2" style="display:inline">
                    {{formList2.maintain_amount_source_custom}}
                  </div>
                </div>
              </div>
              <div class="titleCompare">项目使用情况:</div>
              <div class="divCompare">
                <div id="context2" style="display:inline">{{formList2.context}}</div>
              </div>
              <el-form-item prop="check_file">
                <up-load titleName="财政局指标文/大数据局(经信委)技术审核文件" :size="50" :require="true" :switch="false"
                  :color="formList.check_file!=formList2.check_file?'red':''" v-model="formList2.check_file">
                </up-load>
              </el-form-item>
              <el-form-item prop="document_url">
                <up-load titleName="发改委批复文件" :size="50" :require="true" :switch="false"
                  :color="formList.document_url!=formList2.document_url?'red':''" v-model="formList2.document_url">
                </up-load>
              </el-form-item>
              <el-form-item prop="records_file">
                <up-load titleName="等（分）保备案证书" :size="50" :switch="false"
                  :color="formList.records_file!=formList2.records_file?'red':''" v-model="formList2.records_file">
                </up-load>
              </el-form-item>
              <el-form-item prop="evaluation_file">
                <up-load titleName="漏扫或等保测评报告" :size="50" :switch="false"
                  :color="formList.evaluation_file!=formList2.evaluation_file?'red':''"
                  v-model="formList2.evaluation_file"></up-load>
              </el-form-item>
              <el-form-item prop="doc_url">
                <up-load titleName="源代码及其技术文档" :size="50" :switch="false"
                  :color="formList.doc_url!=formList2.doc_url?'red':''" v-model="formList2.doc_url"
                  :accept="['pdf', 'rar', 'zip']">
                </up-load>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import UpLoad from '@/components/Upload'
import { MyCompare } from './compare'
import { f_buildType, f_purchaseType, f_levelProtect, f_declareType, f_declarePastType } from '@/utils/filters.js'

export default {
  components: {
    UpLoad
  },
  props: {
    formList: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      loading: true,
      formList2: {},
    }
  },
  mounted () {

  },
  methods: {
    async init () {
      this.loading = true
      const res = await this.$http('inputProjectObj', {
        id: this.formList.copy_old_id
      })
      this.formList2 = res

      this.formList.create_time = this.$util.formatDate(this.formList.create_time)
      this.formList2.create_time = this.$util.formatDate(this.formList2.create_time)

      this.compare()
      // this.loading = false
    },
    compare () {
      setTimeout(() => {
        MyCompare(document.getElementById('project_name' + '1'), document.getElementById('project_name' + '2'))
        MyCompare(document.getElementById('check_flag' + '1'), document.getElementById('check_flag' + '2'))
        MyCompare(document.getElementById('document_code' + '1'), document.getElementById('document_code' + '2'))
        MyCompare(document.getElementById('project_model' + '1'), document.getElementById('project_model' + '2'))
        MyCompare(document.getElementById('procurement_method' + '1'), document.getElementById('procurement_method' + '2'))
        MyCompare(document.getElementById('project_grade' + '1'), document.getElementById('project_grade' + '2'))
        MyCompare(document.getElementById('department' + '1'), document.getElementById('department' + '2'))
        MyCompare(document.getElementById('contacts' + '1'), document.getElementById('contacts' + '2'))
        MyCompare(document.getElementById('contact_mobile' + '1'), document.getElementById('contact_mobile' + '2'))
        MyCompare(document.getElementById('maintenance_department' + '1'), document.getElementById('maintenance_department' + '2'))
        MyCompare(document.getElementById('maintenance_contacts' + '1'), document.getElementById('maintenance_contacts' + '2'))
        MyCompare(document.getElementById('maintenance_contacts_mobile' + '1'), document.getElementById('maintenance_contacts_mobile' + '2'))
        MyCompare(document.getElementById('amount' + '1'), document.getElementById('amount' + '2'))
        MyCompare(document.getElementById('create_time' + '1'), document.getElementById('create_time' + '2'))
        MyCompare(document.getElementById('maintenance_type' + '1'), document.getElementById('maintenance_type' + '2'))
        MyCompare(document.getElementById('maintain_amount_source' + '1'), document.getElementById('maintain_amount_source' + '2'))
        MyCompare(document.getElementById('maintain_amount_source_custom' + '1'), document.getElementById('maintain_amount_source_custom' + '2'))
        MyCompare(document.getElementById('context' + '1'), document.getElementById('context' + '2'))
        this.loading = false
      }, 3000)
    }
  },
  watch: {
    'formList.id': {
      // 深度监听
      handler (newId, oldId) {
        if (newId !== oldId) {
          this.init()
        }
      },
      immediate: true
    }
  },
  filters: {
    f_buildType: f_buildType,
    f_purchaseType: f_purchaseType,
    f_levelProtect: f_levelProtect,
    f_declareType: f_declareType,
    f_declarePastType: f_declarePastType,
  }
}
</script>

<style scoped>
.titleCompare {
  margin-top: 10px;
  font-size: 15px;
}
.divCompare {
  margin: 5px 0px 10px 0px;
  border: 0.5px solid;
  border-radius: 5px;
  padding: 6px;
  border-color: rgb(220, 222, 226);
  min-height: 2rem;
}
.loading {
  position: fixed;
  /* left: 0; */
  /* top: 0; */
  background: url("~@/assets/images/svg/loading.svg") center center no-repeat
    #fff;
  width: 65%;
  height: 500px;
  z-index: 1000;
}
</style>
